<template>
    <el-row :gutter="20">
        <el-col :span="18">
            <el-card>
                <MapContain v-loading="loading" ref="map"></MapContain>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="des">
                <div>1.累计充电站数量：<el-text type="primary">34个</el-text></div>
                <div>2.单省份最多充电桩：<el-text type="primary">北京(4个)</el-text></div>
                <div>3.充电站遍及省份：<el-text type="primary">14个</el-text></div>
                <div>4.暂无充电站省份：<el-text type="primary">22个</el-text></div>
                <div>5.累计充电站：<el-text type="primary">北京(4个)</el-text></div>
                <div>6.单日营收最高：<el-text type="primary">北京西单充电站</el-text></div>
                <div>7.单日营收最低：<el-text type="primary">南宁青秀山充电站</el-text></div>
                <div>8.故障率最高：<el-text type="primary">兰州黄河桥充电站</el-text></div>
            </el-card>
            <el-card class="mt">
                <template #header>
                    <div class="card-header">
                        <h4>新增站点地图</h4>
                    </div>
                </template>
                <el-form ref="FormRef" :model="ruleForm" :rules="rules" label-width="100px">
                    <el-form-item label="站点名称：" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入站点名称"></el-input>
                    </el-form-item>
                    <el-form-item label="站点地址：" prop="address">
                        <el-input v-model="ruleForm.address" placeholder="请输入站点地址"></el-input>
                    </el-form-item>
                    <el-form-item label="经度：" prop="longitude">
                        <el-input v-model="ruleForm.longitude" placeholder="请输入经度"></el-input>
                    </el-form-item>
                    <el-form-item label="维度：" prop="latitude">
                        <el-input v-model="ruleForm.latitude" placeholder="请输入维度"></el-input>
                    </el-form-item>
                    <el-form-item label="立即使用：" prop="isSwitch">
                        <el-switch v-model="ruleForm.isSwitch" />
                    </el-form-item>
                    <el-form-item label="备注" prop="textarea">
                        <el-input type="textarea" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleCheckForm">创建</el-button>
                        <el-button @click="resetForm">清空</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormRules, FormInstance } from 'element-plus';
import MapContain from '@/components/map/MapContain.vue';
const FormRef = ref<FormInstance>()
// 父组件
const loading = ref<boolean>(false)
const map = ref()
interface RuleForm {
    name: string,
    address: string,
    longitude: string,
    latitude: string,
    isSwitch: boolean,
    textarea: string
}

const ruleForm = ref<RuleForm>({
    name: '',
    address: '',
    longitude: '',
    latitude: '',
    isSwitch: false,
    textarea: ''
})
// 校验名字是不是纯中文
const validateName = (rule: any, value: string, callback: any) => {
    console.log(rule, value)
    const reg = /^[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]+$/;
    if (!reg.test(value)) {
        return callback('要填写的名称必须是中文')
    }
    return callback()
}
// 经度校验
const isRealLongitude = (rule: any, value: string, callback: any) => {
    if (parseFloat(value) >= 73.40 && parseFloat(value) <= 135.5) {
        callback()
    }
    return callback('正确的经度范围在（73.40-135.5）')
}
const isRealLatitude = (rule: any, value: string, callback: any) => {
    if (parseFloat(value) >= 3.51 && parseFloat(value) <= 53.31) {
        callback()
    }
    return callback('正确的纬度范围在（3.51-53.31）')
}
// 校验经度和纬度是否是
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: "站点名称不可以为空", trigger: 'blur' },
        { validator: validateName, trigger: 'blur' }
    ],
    address: [
        { required: true, message: "站点地址不可以为空", trigger: 'blur' },
        { validator: validateName, trigger: 'blur' }
    ],
    longitude: [
        { required: true, message: "经度不可以为空", trigger: 'blur' },
        { validator: isRealLongitude, trigger: 'blur' }
    ],
    latitude: [
        { required: true, message: "纬度不可以为空", trigger: 'blur' },
        { validator: isRealLatitude, trigger: 'blur' }
    ],
    isSwitch: [
        { required: true, message: "不可以为空", trigger: 'blur' }
    ]
})
// 表单校验
const handleCheckForm = () => {
    FormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            loading.value = true
            // 重点
            // resolve如果不执行这个回调函数程序将卡在这里，这里的效果是要实现加载的效果(不影响)
            await new Promise<void>(resolve => {
                setTimeout(() => {
                    loading.value = false
                    resolve()
                }, 500) 
            })
            ElMessage({
                message: '新增站点成功',
                type: 'success',
            })
            // 重新加载地图数据
            // 父组件要通过defineExpose暴露在外loadDate
            map.value.loadData()
            resetForm()

        }
    })
}
// 重置表单
const resetForm = () => {
    FormRef.value?.resetFields()
}
</script>


<style lang="less" scoped>
.des {
    line-height: 35px;
    font-size: 16px;
}
</style>